<template>
    <div>
        <a-card style="height: 95vh">
            <!-- 新增按钮 -->
            <a-row class="yy-Row">
                <a-col :span="3">
                    <a-button type="primary" v-has="'btn_SEM3500_add'" @click="addData">{{$t('btn.add')}}</a-button>
                </a-col>
            </a-row>
            <!-- table数据 -->
            <a-row>
                <a-col :span="24">
                    <m-table
                        :columns="columns"
                        :dataSource="dataSource"
                        :loading="loadTable"
                        bordered
                        :rowKey="(record,index)=>{return index}"
                        :row-click="customRowTest"
                        :scroll="{x: 1000,y:windowHeight-250}"
                        :pagination="{
                            pageSize:13,
                            size: 'small',
                            total: dataSource.length,
                            showTotal: (total, range) => {
                              return $t('menuItem.total')+` ${total} `+$t('menuItem.term')
                            },
                          }"
                    >
                        <template slot="action" slot-scope="text, record" v-if="!record.isEmpty">
                            <div>
                                <span>
                                    <a-button type="primary" size="small" v-has="'btn_SEM3500_update'"
                                              @click="() => updateData(record)">{{$t('btn.update')}}</a-button>
                                    <a-popconfirm
                                        :title="$t('menuItem.confirmDel')"
                                        :okText="$t('menuItem.confirm')"
                                        :cancelText="$t('menuItem.cancel')"
                                        @confirm="() =>deleteData(record)"
                                    >
                                       <a-button type="danger" v-has="'btn_SEM3500_delete'" size="small"
                                                 style="margin-left: 5px">{{$t('btn.delete')}}</a-button>
                                    </a-popconfirm>
                                </span>
                            </div>
                        </template>
                        <template slot="createUserId" slot-scope="text,record" v-if="!record.isEmpty">
                            <span :title="text">{{ getUserName(text) }}</span>
                        </template>
                        <template slot="updateUserId" slot-scope="text,record" v-if="!record.isEmpty">
                            <span :title="text">{{ getUserName(text) }}</span>
                        </template>
                    </m-table>
                </a-col>
            </a-row>
        </a-card>

        <!-- 新增/編輯系统公告 -->
        <a-modal centered
                 width="30%"
                 :visible="capvisible"
                 :title="$t('menuItem.UpdateSysytemNoticle')"
                 :okText="$t('menuItem.confirm')"
                 :cancelText="$t('menuItem.cancel')"
                 @ok="addAndEdithandleOk"
                 @cancel="caphandleCancel">
            <a-card>
                <a-form-model
                    :model="capForm"
                    ref="capForm"
                    :rules="capRules"
                    labelAlign="right"
                    layout="inline"
                    :label-col="{span: 6}"
                    :wrapper-col="{span: 16}"
                >
                    <a-row style="margin:1rem 0">
                        <a-col>
                            <a-form-model-item :label="$t('menuItem.NoticeTitle')" prop="name" style="width: 100%;">
                                <a-input v-model="capForm.name"/>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row style="margin:1rem 0">
                        <a-col>
                            <a-form-model-item :label="$t('menuItem.NoticeContent')" prop="desc" style="width: 100%;">
                                <a-input v-model="capForm.desc" type="textarea"/>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row style="margin:1rem 0">
                        <a-col>
                            <a-form-model-item :label="$t('menuItem.NoticeStartTime')" prop="startTime" style="width: 100%;">
                                <a-date-picker
                                    show-time
                                    v-model="capForm.startTime"
                                    :placeholder="$t('menuItem.NoticeStartTimeWarn')"
                                    valueFormat="YYYY-MM-DD HH:mm:ss"
                                    style="width: 100%;"
                                ></a-date-picker>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                    <a-row style="margin:1rem 0">
                        <a-col>
                            <a-form-model-item :label="$t('menuItem.NoticeEndTime')" prop="endTime" style="width: 100%;">
                                <a-date-picker
                                    show-time
                                    v-model="capForm.endTime"
                                    :placeholder="$t('menuItem.NoticeEndTimeWarn')"
                                    valueFormat="YYYY-MM-DD HH:mm:ss"
                                    style="width: 100%;"
                                ></a-date-picker>
                            </a-form-model-item>
                        </a-col>
                    </a-row>
                </a-form-model>
            </a-card>
        </a-modal>

    </div>
</template>

<script>
import {mapState, mapMutations} from "vuex";
import moment from "moment";
import MTable from "../../../components/MTable";

export default {
    name: 'SysNoticeManage',
    components: {MTable},
    data() {
        // 结束时间验证
        const disabledEndDate = (rule, value, callback) => {

            if (value == null || value === "") {
                callback(new Error(this.$i18n.tc('menuItem.NoticeEndTimeWarn')));
            } else {
                if (this.capForm.startTime != null) {
                    if (value < moment(this.capForm.startTime).format('YYYY-MM-DD HH:mm:ss')) {
                        callback(new Error(this.$i18n.tc('menuItem.NoticeTimeWarn')));
                    }
                }
                callback();
            }

        };
        return {
          columns: [
            {
              title: this.$t('menuItem.NoticeTitle'),
              dataIndex: 'title',
              key: 'title',
              width: 200,
              align: 'center',
            },
            {
              title: this.$t('menuItem.NoticeContent'),
              dataIndex: 'content',
              key: 'content',
              width: 500,
              align: 'center',
              customRender: (text, record, index) => {
                if(text!=null) {
                  let content = text.split('\n')
                  return (
                      content.map(item =>{
                        return (<li>{item}</li>)
                      })
                  )
                }

              }
            },
            {
              title: this.$t('menuItem.NoticeStartTime'),
              dataIndex: 'startTime',
              key: 'startTime',
              align: 'center',
              width: 200,
            },
            {
              title: this.$t('menuItem.NoticeEndTime'),
              dataIndex: 'endTime',
              key: 'endTime',
              align: 'center',
              width: 200,
            },
            {
              title: this.$t('menuItem.NoticeCreateUser'),
              dataIndex: 'createUserId',
              key: 'createUserId',
              align: 'center',
              width: 150,
              scopedSlots: {customRender: 'createUserId'},
            },
            {
              title: this.$t('menuItem.NoticeCreateTime'),
              dataIndex: 'createTime',
              key: 'createTime',
              align: 'center',
              width: 200,
            },
            {
              title: this.$t('menuItem.NoticeUpdateUser'),
              dataIndex: 'updateUserId',
              key: 'updateUserId',
              align: 'center',
              width: 150,
              scopedSlots: {customRender: 'updateUserId'},
            },
            {
              title: this.$t('menuItem.NoticeUpdateTime'),
              dataIndex: 'updateTime',
              key: 'updateTime',
              align: 'center',
              width: 200,
            },
            {
              title: this.$t('menuItem.UserTableOperation'),
              dataIndex: 'action',
              key: 'action',
              align: 'center',
              width: 200,
              scopedSlots: {customRender: 'action'},
            },
          ],
            capRules: {
                name: [{required: true, message: this.$i18n.tc('menuItem.NoticeTitleWarn')},],
                desc: [{required: true, message: this.$i18n.tc('menuItem.NoticeContentWarn')},],
                startTime: [{required: true, message: this.$i18n.tc('menuItem.NoticeStartTimeWarn')},],
                endTime: [{required: true, validator: disabledEndDate, trigger: "change"}],
            },
            windowHeight: document.documentElement.clientHeight,   //实时屏幕高度
        }
    },
    computed: {
        ...mapState('js3500', ['dataPagination', 'dataSource', 'loadTable', 'capvisible', 'capForm', 'userList']),
    },
    methods: {
        ...mapMutations('js3500', ['setDataPagination','queryAnnounce', 'addData', 'updateData', 'deleteData',
            'customRow', 'caphandleOk', 'caphandleCancel', 'queryUserList']),
        // 选中行
        customRowTest(record, index) {
            this.customRow(record)
        },
        // 根据id获取用户名
        getUserName(val) {
            let index = this.userList.findIndex(el => el.id === val)
            if (index > -1) {
                return this.userList[index].userName;
            }
            return val;
        },
        // 新增编辑弹窗确定
        addAndEdithandleOk() {
            this.$refs.capForm.validate(valid => {
                if (valid) {
                    this.caphandleOk()
                }
            })
        },

    },

    mounted() {
        window.onresize = () => {
            return (() => {
                window.fullHeight = document.documentElement.clientHeight;
                this.windowHeight = window.fullHeight;
            })();
        };
        // 查询table数据
        this.queryAnnounce()
        // 查询用户列表
        this.queryUserList()
    },
    watch: {
        // 监听弹窗关闭，重置表单数据
        '$store.state.js3500.capvisible': {
            deep: true,
            handler(val) {
                if (!val) {
                    this.$refs.capForm.resetFields();
                }
            }
        }
    },
}
</script>


<style scoped>
.yy-Row {
    margin-bottom: 1rem
}

</style>
